<template>
  <div class="canteen-container">
    <h2>食堂服务</h2>
    
    <el-tabs v-model="activeTab">
      <el-tab-pane label="食堂列表" name="list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="canteen in canteens" :key="canteen.id">
            <el-card class="canteen-card" shadow="hover">
              <div class="canteen-header">
                <h3>{{ canteen.name }}</h3>
                <el-tag :type="canteen.status === '营业中' ? 'success' : 'info'">
                  {{ canteen.status }}
                </el-tag>
              </div>
              <div class="canteen-location">
                <el-icon><Location /></el-icon>
                {{ canteen.location }}
              </div>
              <div class="canteen-hours">
                <el-icon><Clock /></el-icon>
                {{ canteen.openTime }} - {{ canteen.closeTime }}
              </div>
              <div class="canteen-queue">
                <el-icon><User /></el-icon>
                当前排队人数: 
                <span :class="getQueueClass(canteen.queue)">
                  {{ canteen.queue }}人
                </span>
              </div>
              <div class="canteen-rating">
                <el-rate
                  v-model="canteen.rating"
                  disabled
                  show-score
                  text-color="#ff9900">
                </el-rate>
              </div>
              <div class="canteen-actions">
                <el-button type="primary" @click="viewCanteenDetail(canteen)">查看详情</el-button>
                <el-button @click="viewMenu(canteen)">查看菜单</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane label="推荐窗口" name="recommend">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>热门推荐</span>
              <el-radio-group v-model="recommendFilter" @change="filterRecommend">
                <el-radio-button label="all">全部</el-radio-button>
                <el-radio-button label="breakfast">早餐</el-radio-button>
                <el-radio-button label="lunch">午餐</el-radio-button>
                <el-radio-button label="dinner">晚餐</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          
          <el-row :gutter="20">
            <el-col :span="12" v-for="dish in recommendedDishes" :key="dish.id">
              <el-card class="dish-card" shadow="hover">
                <el-row :gutter="15">
                  <el-col :span="8">
                    <div class="dish-image">
                      <img :src="dish.image" :alt="dish.name">
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div class="dish-info">
                      <h4>{{ dish.name }}</h4>
                      <div class="dish-canteen">{{ dish.canteen }} - {{ dish.window }}</div>
                      <div class="dish-price">¥{{ dish.price }}</div>
                      <div class="dish-rating">
                        <el-rate
                          v-model="dish.rating"
                          disabled
                          size="small">
                        </el-rate>
                        <span class="rating-count">({{ dish.ratingCount }})</span>
                      </div>
                      <div class="dish-tags">
                        <el-tag v-for="tag in dish.tags" :key="tag" size="small" style="margin-right: 5px;">
                          {{ tag }}
                        </el-tag>
                      </div>
                      <el-button type="primary" size="small" @click="orderDish(dish)">点餐</el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>
    </el-tabs>
    
    <!-- 食堂详情对话框 -->
    <el-dialog v-model="detailDialogVisible" :title="selectedCanteen.name" width="60%">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="canteen-detail-info">
            <div class="info-item">
              <label>位置：</label>
              <span>{{ selectedCanteen.location }}</span>
            </div>
            <div class="info-item">
              <label>营业时间：</label>
              <span>{{ selectedCanteen.openTime }} - {{ selectedCanteen.closeTime }}</span>
            </div>
            <div class="info-item">
              <label>当前状态：</label>
              <el-tag :type="selectedCanteen.status === '营业中' ? 'success' : 'info'">
                {{ selectedCanteen.status }}
              </el-tag>
            </div>
            <div class="info-item">
              <label>当前排队：</label>
              <span :class="getQueueClass(selectedCanteen.queue)">
                {{ selectedCanteen.queue }}人
              </span>
            </div>
            <div class="info-item">
              <label>综合评分：</label>
              <el-rate
                v-model="selectedCanteen.rating"
                disabled
                show-score
                text-color="#ff9900">
              </el-rate>
            </div>
            <div class="info-item">
              <label>简介：</label>
              <span>{{ selectedCanteen.description }}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="canteen-map">
            <img src="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100" alt="地图">
          </div>
        </el-col>
      </el-row>
      
      <el-divider>窗口列表</el-divider>
      
      <el-table :data="selectedCanteen.windows" style="width: 100%">
        <el-table-column prop="name" label="窗口名称"></el-table-column>
        <el-table-column prop="type" label="菜系"></el-table-column>
        <el-table-column prop="rating" label="评分">
          <template #default="scope">
            <el-rate v-model="scope.row.rating" disabled size="small"></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" @click="viewWindowMenu(scope.row)">查看菜单</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 菜单对话框 -->
    <el-dialog v-model="menuDialogVisible" :title="`${selectedCanteen.name} - ${selectedWindow.name}`" width="50%">
      <el-table :data="windowDishes" style="width: 100%">
        <el-table-column prop="name" label="菜品"></el-table-column>
        <el-table-column prop="price" label="价格">
          <template #default="scope">
            ¥{{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="rating" label="评分">
          <template #default="scope">
            <el-rate v-model="scope.row.rating" disabled size="small"></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" type="primary" @click="orderDish(scope.row)">点餐</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="menuDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 点餐对话框 -->
    <el-dialog v-model="orderDialogVisible" title="点餐" width="400px">
      <el-form :model="orderForm" label-width="80px">
        <el-form-item label="菜品">
          <el-input v-model="orderForm.dishName" disabled></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="orderForm.price" disabled>
            <template #prepend>¥</template>
          </el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input-number v-model="orderForm.quantity" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="总价">
          <el-input v-model="orderForm.totalPrice" disabled>
            <template #prepend>¥</template>
          </el-input>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="orderDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmOrder">确认点餐</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Location, Clock, User } from '@element-plus/icons-vue'

export default {
  name: 'Canteen',
  components: {
    Location,
    Clock,
    User
  },
  data() {
    return {
      activeTab: 'list',
      recommendFilter: 'all',
      canteens: [
        {
          id: 1,
          name: '第一食堂',
          location: '教学楼A区一楼',
          openTime: '06:30',
          closeTime: '21:00',
          status: '营业中',
          queue: 15,
          rating: 4.5,
          description: '学校主食堂，菜品种类丰富，价格实惠',
          windows: [
            { id: 1, name: '川菜窗口', type: '川菜', rating: 4.6 },
            { id: 2, name: '粤菜窗口', type: '粤菜', rating: 4.3 },
            { id: 3, name: '面食窗口', type: '面食', rating: 4.7 }
          ]
        },
        {
          id: 2,
          name: '第二食堂',
          location: '宿舍区B栋旁',
          openTime: '07:00',
          closeTime: '21:30',
          status: '营业中',
          queue: 8,
          rating: 4.2,
          description: '环境优雅，以精品小炒为主',
          windows: [
            { id: 4, name: '小炒窗口', type: '小炒', rating: 4.4 },
            { id: 5, name: '煲仔饭窗口', type: '煲仔饭', rating: 4.5 }
          ]
        },
        {
          id: 3,
          name: '第三食堂',
          location: '图书馆旁',
          openTime: '07:30',
          closeTime: '20:00',
          status: '已打烊',
          queue: 0,
          rating: 4.0,
          description: '特色风味食堂，提供各地特色美食',
          windows: [
            { id: 6, name: '东北菜窗口', type: '东北菜', rating: 4.2 },
            { id: 7, name: '西北菜窗口', type: '西北菜', rating: 4.1 }
          ]
        }
      ],
      recommendedDishes: [
        {
          id: 1,
          name: '红烧肉',
          canteen: '第一食堂',
          window: '川菜窗口',
          price: 12.00,
          rating: 4.8,
          ratingCount: 128,
          tags: ['热销', '招牌'],
          image: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          id: 2,
          name: '宫保鸡丁',
          canteen: '第一食堂',
          window: '川菜窗口',
          price: 10.00,
          rating: 4.6,
          ratingCount: 96,
          tags: ['辣味'],
          image: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          id: 3,
          name: '牛肉煲仔饭',
          canteen: '第二食堂',
          window: '煲仔饭窗口',
          price: 15.00,
          rating: 4.7,
          ratingCount: 87,
          tags: ['热销'],
          image: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          id: 4,
          name: '西红柿鸡蛋面',
          canteen: '第一食堂',
          window: '面食窗口',
          price: 8.00,
          rating: 4.4,
          ratingCount: 75,
          tags: ['清淡'],
          image: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ],
      detailDialogVisible: false,
      menuDialogVisible: false,
      orderDialogVisible: false,
      selectedCanteen: {},
      selectedWindow: {},
      windowDishes: [
        { id: 1, name: '红烧肉', price: 12.00, rating: 4.8 },
        { id: 2, name: '宫保鸡丁', price: 10.00, rating: 4.6 },
        { id: 3, name: '麻婆豆腐', price: 8.00, rating: 4.3 }
      ],
      orderForm: {
        dishName: '',
        price: 0,
        quantity: 1,
        totalPrice: 0
      }
    }
  },
  watch: {
    'orderForm.quantity': {
      handler(newVal) {
        this.orderForm.totalPrice = (this.orderForm.price * newVal).toFixed(2)
      },
      immediate: true
    }
  },
  methods: {
    getQueueClass(queue) {
      if (queue <= 5) {
        return 'queue-low'
      } else if (queue <= 15) {
        return 'queue-medium'
      } else {
        return 'queue-high'
      }
    },
    viewCanteenDetail(canteen) {
      this.selectedCanteen = canteen
      this.detailDialogVisible = true
    },
    viewMenu(canteen) {
      this.selectedCanteen = canteen
      this.selectedWindow = canteen.windows[0]
      this.menuDialogVisible = true
    },
    viewWindowMenu(window) {
      this.selectedWindow = window
      // 模拟获取窗口菜品数据
      this.windowDishes = [
        { id: 1, name: window.name + '特色菜1', price: 12.00, rating: 4.5 },
        { id: 2, name: window.name + '特色菜2', price: 10.00, rating: 4.3 },
        { id: 3, name: window.name + '特色菜3', price: 8.00, rating: 4.7 }
      ]
      this.menuDialogVisible = true
    },
    orderDish(dish) {
      this.orderForm.dishName = dish.name
      this.orderForm.price = dish.price
      this.orderForm.quantity = 1
      this.orderForm.totalPrice = dish.price
      this.orderDialogVisible = true
    },
    confirmOrder() {
      this.$message.success(`点餐成功！${this.orderForm.dishName} x ${this.orderForm.quantity}，总价 ¥${this.orderForm.totalPrice}`)
      this.orderDialogVisible = false
    },
    filterRecommend() {
      // 模拟筛选推荐菜品
      this.$message.info(`筛选类型: ${this.recommendFilter}`)
    }
  }
}
</script>

<style scoped>
.canteen-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.canteen-card {
  margin-bottom: 20px;
}

.canteen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.canteen-header h3 {
  margin: 0;
  color: #303133;
}

.canteen-location,
.canteen-hours,
.canteen-queue {
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}

.canteen-location .el-icon,
.canteen-hours .el-icon,
.canteen-queue .el-icon {
  margin-right: 5px;
  color: #909399;
}

.queue-low {
  color: #67c23a;
  font-weight: bold;
}

.queue-medium {
  color: #e6a23c;
  font-weight: bold;
}

.queue-high {
  color: #f56c6c;
  font-weight: bold;
}

.canteen-rating {
  margin: 15px 0;
}

.canteen-actions {
  text-align: right;
}

.dish-card {
  margin-bottom: 20px;
}

.dish-image img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
}

.dish-info h4 {
  margin: 0 0 10px 0;
  color: #303133;
}

.dish-canteen {
  margin-bottom: 10px;
  font-size: 14px;
  color: #909399;
}

.dish-price {
  margin-bottom: 10px;
  font-size: 18px;
  color: #e6a23c;
  font-weight: bold;
}

.dish-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-count {
  margin-left: 10px;
  font-size: 14px;
  color: #909399;
}

.canteen-detail-info .info-item {
  margin-bottom: 15px;
  display: flex;
}

.canteen-detail-info .info-item label {
  width: 100px;
  font-weight: bold;
  color: #909399;
}

.canteen-map img {
  width: 100%;
  border-radius: 4px;
}
</style>